<section class="section" id="tabs">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#tabs">Tabs</a>
        </h1>
    </header>

    <div class="row">
        <div class="col-xs-24">
            <p>The Bootstrap Tabs component is styled to match the MDL Pivot control.</p>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
            </ul>
            <br>
            <p>Pivots are available in the alt theme as well.</p>
            <!-- Nav tabs alt color -->
            <ul class="nav nav-tabs theme-alt" role="tablist" style="background-color:#000;">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
            </ul>
            <br>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat sollicitudin dui mollis imperdiet. Nam fringilla sed odio sit amet luctus. In hac habitasse platea dictumst. Nunc non nulla in quam porttitor pretium eget congue metus. Morbi volutpat nisl ut urna interdum mollis. Cras pretium nisi vel neque vulputate, a luctus purus dictum. Mauris non mauris semper, consectetur nisi id, lacinia libero. Curabitur ante diam, viverra at sagittis quis, ullamcorper quis felis. Curabitur maximus tellus non sagittis finibus. Nullam ut dolor tincidunt nisi fermentum suscipit. Maecenas eleifend lorem sit amet massa tristique facilisis. Nunc varius velit et magna suscipit gravida. Phasellus lobortis congue magna ut iaculis. Sed sodales ut tortor a interdum. Maecenas sagittis augue augue, eu sollicitudin libero volutpat eu. Phasellus tempor lobortis gravida.
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">
                    Integer in libero dapibus, finibus est at, ultricies ligula. Quisque euismod sodales cursus. Fusce finibus volutpat ex, sit amet molestie tortor. Integer pellentesque accumsan lectus viverra vehicula. Suspendisse porttitor arcu risus, a lacinia ligula sodales eu. Morbi consectetur sem at ex aliquet venenatis non id erat. Duis fermentum risus id massa auctor auctor. Nam hendrerit posuere laoreet. Praesent nisl libero, euismod eget faucibus quis, dignissim at tortor. Morbi nec neque vel diam maximus ultrices. Nam condimentum imperdiet metus, et lobortis enim vulputate non. Nam et neque enim. Quisque in blandit nunc, eu ornare tellus. Integer eget urna tincidunt libero maximus accumsan.
                </div>
                <div role="tabpanel" class="tab-pane" id="messages">
                    Morbi porta elit vel ante tempus, vel fringilla augue tincidunt. Donec vehicula lorem velit, at pulvinar purus maximus at. Sed id libero interdum, pellentesque magna eu, varius ex. Morbi quis leo consequat, tempor massa ut, gravida enim. Nam a neque in turpis dapibus varius ut ut tortor. Cras sagittis massa nisi. Aliquam mollis, lectus molestie finibus vulputate, neque sem posuere tellus, eu dapibus erat massa id tortor. Vivamus sed dictum sapien, et tristique odio. Quisque ac ligula viverra, sollicitudin sapien in, sollicitudin est. Cras ultrices malesuada porttitor. Nunc non enim eget eros gravida sodales.
                </div>
                <div role="tabpanel" class="tab-pane" id="settings">
                    Suspendisse scelerisque neque nisi, a luctus arcu aliquet sit amet. Nullam vel consectetur mi. Nam imperdiet, tellus id accumsan posuere, risus eros tempor libero, a facilisis lacus dolor vitae sem. Fusce dolor leo, hendrerit sagittis diam sed, sodales luctus felis. Aenean accumsan ullamcorper ipsum, tincidunt tempor metus blandit sit amet. Duis sagittis gravida purus vel bibendum. Aliquam sagittis ligula a elementum interdum. Duis placerat ligula lorem.
                </div>
            </div>
            <br>
            {{#markdown}}
```xml
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
```
            {{/markdown}}
        </div>
        <div class="col-md-24">
            <div class="guidance guidance-usage m-t-xs">
                {{#markdown}}
{{> tabs-guidance.md}}
                {{/markdown}}
            </div>
        </div>
    </div>

</section>
